<template>
	<view :style="[AppSkinVar]">
		<scroll-view class="scroll-y" scroll-y @scrolltolower="getData" lower-threshold="60">
			<view class="">
				<background-image :src="$countryCode === 'en_US' ? '/pages/seckill/static/seckill-header_en.png' : '/pages/seckill/static/seckill-header.png'" :size="['100vw', '560rpx']">
					<view class="header-box" >
						<view class="e-flex e-flex-between e-flex-x-reverse e-p-t-60">
							<view class="rules-box" @tap="handleShowRules" v-if="rules.ruleState">
								<text class="c-white e-font-24">{{$t('seckill.rules')}}</text>
							</view>
						</view>
						<view class="jjs">
							<text class="e-font-28 fw-500 c-white">{{$t('seckill.fromEnd')}}</text>
						</view>
						<view class="count-down e-flex-xy-center">
					
							<view class="c-red count-down-box e-m-l-10 e-m-r-10 e-flex-xy-center">
								{{day}}
							</view>
							<text class="e-font-28 fw-500 c-white">{{$t('seckill.day')}}</text>
							<view class="c-red count-down-box e-m-l-10 e-m-r-10 e-flex-xy-center">
								{{hours}}
							</view>
							<text class="e-font-28 fw-500 c-white">{{$t('seckill.hours')}}</text>
							<view class="c-red count-down-box e-m-l-10 e-m-r-10 e-flex-xy-center">
								{{minute}}
							</view>
							<text class="e-font-28 fw-500 c-white">{{$t('seckill.minute')}}</text>
							<view class="c-red count-down-box e-m-l-10 e-m-r-10 e-flex-xy-center">
								{{seconds}}
							</view>
							<text class="e-font-28 fw-500 c-white">{{$t('seckill.second')}}</text>
					
						</view>
					</view>
				</background-image>
				
				<view class="seckill-goods-box">
					<empty paddingTop="126rpx" :text="$t('nearby.empty')" :icon="$staticPath('default_img.png')"
						v-if="isEmpty"></empty>
					<view class="e-p-l-20 e-p-r-20 seckill-goods-list" v-else>

						<GoodsItem v-for="item in goodsList" :key="item.id" :info="item"></GoodsItem>
						<load-more :showLoad="showLoad"></load-more>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 规则弹窗 -->
		<e-modal :show="show" :title="$t('seckill.seckillRules')" :showConfirmButton="false">
			<view class="e-flex-column ">
				<view class="c-333 e-font-24 e-p-t-40 e-p-b-40 h-650">
					<e-parse v-if="rules" :content="rules.ruleMsg"></e-parse>
				</view>
				<view class="close-btn" @tap="show=false">
					<text class="c-white e-font-28">{{$t('seckill.isee')}}</text>
				</view>
			</view>
		</e-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref, onUnmounted } from 'vue'
	import GoodsItem from './child/goodsItem.vue'
	import { getSeckillRule, getSeckillGoodsList } from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import { getInterval, padZero } from '@/common/utils'

	const {
		showLoad,
		isEmpty,
		list: goodsList,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getSeckillGoodsList,
		pageSize: 20
	})

	let timer : undefined | number = undefined
	const day = ref('')
	const hours = ref('')
	const minute = ref('')
	const seconds = ref('')
	const show = ref(false)
	const rules = ref({
		ruleState: 0,
		ruleMsg: ''
	})

	getSeckillRule().then(res => {
		rules.value = res.data
	})



	const getData = () => {
		handleQueryPage()
	}
	const endTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1).getTime()
	const countDown = () => {
		timer = setTimeout(() => {
			const { d, h, m, s } = getInterval(endTime)
			day.value = padZero(d)
			hours.value = padZero(h)
			minute.value = padZero(m)
			seconds.value = padZero(s)
			countDown()
		}, 1000)
	}
	const _clearTimeout = () => {
		clearTimeout(timer)
		timer = undefined
	}
	const handleShowRules = () => {
		show.value = true
	}

	handleRefresh()
	countDown()

	onUnmounted(() => {
		_clearTimeout()
	})
</script>

<style lang="scss">
	.header-box {
		width: 100vw;
		height: 560rpx;
	}


	.seckill-goods-box {
		position: relative;
		margin-top: -150rpx;
		z-index: 2;
	}

	.scroll-y {
		height: 100vh;
	}

	.jjs {
		padding-top: 230rpx;
		text-align: center;
	}

	.count-down {
		padding-top: 20rpx;

		.count-down-box {
			width: 48rpx;
			height: 48rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	}

	.rules-box {
		width: 88rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 200rpx 0 0 200rpx;
		text-align: center;
	}

	.close-btn {
		width: 300rpx;
		height: 80rpx;
		background: #F5222D;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.h-650 {
		max-height: 1000rpx;
		overflow-y: auto;
	}
</style>